<script setup lang="ts">
import type { FloatProps } from '@/types';

import {
  type ComponentInternalInstance,
  computed,
  getCurrentInstance,
  ref,
  watch,
} from 'vue';

import { Icon } from '@/components/core/icon';

import { useAppStore } from '@/store';

defineOptions({
  name: 'Float',
});
const appStore = useAppStore();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const FLOAT_PRESET: Array<FloatProps> = proxy?.$config.setting
  .float as Array<FloatProps>;
const defaultFloat = computed(() => appStore.setting.float);
const modelValue = ref<string>(defaultFloat.value || 'right');
function activeClass(float: string): string[] {
  return float === modelValue.value ? ['outline-box-active'] : [];
}
watch(
  () => modelValue.value,
  (val) => {
    appStore.updateSetting({ float: val });
  },
);
</script>
<template>
  <div class="content">
    <template v-for="float in FLOAT_PRESET" :key="float.name">
      <div
        class="flex cursor-pointer flex-col"
        @click="modelValue = float.name"
      >
        <div
          :class="activeClass(float.name)"
          class="outline-box flex-center py-4"
        >
          <Icon :icon="float.icon" class="mx-9 size-5" />
        </div>
        <div class="text-muted-foreground mt-2 text-center text-xs">
          {{ float.label }}
        </div>
      </div>
    </template>
  </div>
</template>
